﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>滚动图片</title>
    <style type="text/css">
        body, h1, h2, h3, h4, h5, h6, p, ul, li, dl, dt, dd{padding: 0;margin: 0;font-size: 12px;font-family: Arial,Verdana, Helvetica, sans-serif;word-break: break-all;word-wrap: break-word;}
        li{list-style: none;}
        img{border: none;}
        em{font-style: normal;}
        a{color: #555;text-decoration: none;outline: none;blr: this.onFocus=this.blur();}
        a:hover{color: #000;text-decoration: underline;}
        .clear{height: 0;overflow: hidden;clear: both;}
        .play{width: 500px;height: 300px;text-align: left;margin: 0px;}
        .textbg{margin-top: 270px;z-index: 1;filter: alpha(opacity=40);opacity: 0.4;width: 500px;position: absolute;height: 30px;background: #000;}
        .text{margin-top: 270px;z-index: 2;padding-left: 10px;font-size: 14px;font-weight: bold;width: 340px;color: #fff;line-height: 30px;overflow: hidden;position: absolute;cursor: pointer;}
        .num{margin: 275px 5px 0 350px;z-index: 3;width: 145px;text-align: right;position: absolute;height: 25px;}
        .num a{margin: 0 2px;width: 20px;height: 20px;font-size: 14px;font-weight: bold;line-height: 20px;cursor: pointer;color: #000;padding: 0 5px;background: #D7D6D7;text-align: center;}
        .num a.on{background: #FFD116;color: #A8471C;}
        .num a.on2{background: #D7D6D7;color: #000;}
        .content img{width: 500px;height: 300px;}
    </style> 
 <script src="http://hsjdtech.com/inter/scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body style="margin:0px; padding:0px;">

<div id="mainDiv" style="height:300px; width:500px; float:none; margin-left:auto; margin-right:auto; ">

    <div class="play">
        <ul>
            <li class="textbg"></li>
            <li class="text"></li>
            <li class="num"><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a></li>
            <li class="content">
            <a  target="_blank"><img src="http://hsjdtech.com/inter/images/img/img.jpg" alt="标题标题标题标题标题标题标ABCDEFGHIJKLMNOPQRSTUVWXYZ题标题标题标题标题标题" /></a>
                <a  target="_blank">
                    <img src="http://hsjdtech.com/inter/images/img/img.jpg" alt="九月抄底旅游，马上行动" /></a>
                <a  target="_blank">
                    <img src="http://hsjdtech.com/inter/images/img/img.jpg" alt="港澳旅游：超值特价，奢华享受" /></a>
                <a  target="_blank">
                    <img src="http://hsjdtech.com/inter/images/img/img.jpg" alt="炎炎夏日哪里去，途牛带你海滨游" /></a>
                <a  target="_blank">
                    <img src="http://hsjdtech.com/inter/images/img/img.jpg" alt="定途牛旅游线路，优惠购买乐相册" /></a>
                <a  target="_blank">
                    <img src="http://hsjdtech.com/inter/images/img/img.jpg" alt="三亚自助游" /></a>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
       // $.ajax({
       //     type: "post",
       //     url: "DataCenter.ashx",
       //     data: {
       //         method: "getscrollPicturejson"
       //     },
       //     async: false,
       //     success: function (data, textStu) {
       //         var json = eval(data);
       //         $(".content").html("");
       //         $(json).each(function (i) {
       //             $(".num").append("<a>" + (i + 1) + "</a>");
       //             $(".content").append("<a><img src='Img/" + json[i]["imgName"] + "' alt='" + json[i]["imgTxt"] + "' /></a>");
       //         });
       //     }
       // });

        var t = n = 0, count = $(".content a").size();
        $(function () {
            var play = ".play";
            var playText = ".play .text";
            var playNum = ".play .num a";
            var playConcent = ".play .content a";
            $(playConcent + ":not(:first)").hide();
            $(playText).html($(playConcent + ":first").find("img").attr("alt"));
            $(playNum + ":first").addClass("on");
            $(playText).click(function () { return false; window.open($(playConcent + ":first").attr('href'), "_blank") }); //点击页面跳转hsjd
            $(playNum).click(function () {
                var i = $(this).text() - 1;
                n = i;
                if (i >= count) return;
                $(playText).html($(playConcent).eq(i).find("img").attr('alt'));
                $(playText).unbind().click(function () { return false; window.open($(playConcent).eq(i).attr('href'), "_blank") }); //点击页面跳转hsjd
                $(playConcent).filter(":visible").hide().parent().children().eq(i).fadeIn(1200);
                $(this).removeClass("on").siblings().removeClass("on");
                $(this).removeClass("on2").siblings().removeClass("on2");
                $(this).addClass("on").siblings().addClass("on2");
            });
            t = setInterval("showAuto()", 5000);
            $(play).hover(function () { clearInterval(t) }, function () { t = setInterval("showAuto()", 5000); });
        });
        function showAuto() {
            n = n >= (count - 1) ? 0 : ++n;
            $(".num a").eq(n).trigger('click');
        }
    </script>
</div>
</body>
</html>
